<script setup lang="ts">
/**
 * @description: 搜索表单
 * @param {*} formItems 表单数据
 * @param {*} dicID 字典ID
 * @param {*} signName 按钮权限标识
 * @param {*} remark equal to key
 * @param {*} maxFormItemNum 第一行最大表单元素数量,超过数量折叠
 * 折叠搜索框功能待完善，目前只能显示maxFormItemNum数量内的表单
 * example:
 * <search-form :formItems="formItems" :dicID="dicID" :signName="signName" :remark="remark"></search-form>
 */
import type { PropType } from 'vue'
import type { IButtonMenuRoleMap, IFormItem, IMethods } from '@/types/index.js'
import { ElMessage } from 'element-plus'
import { sortBy, throttle } from 'lodash'
import { inject, ref } from 'vue'
import { useRoute } from 'vue-router'
import searchInput from '@/components/searchForm/searchInput.vue'

const props = defineProps({
  formItems: {
    type: Array as PropType<IFormItem[]>,
    default: () => [],
  },
  config: {
    type: Object,
    default: () => ({}),
  },
  dicID: Number,
  signName: Number,
  remark: Number,
  maxFormItemNum: {
    type: Number,
    default: 5,
  },
})

const methods = inject<IMethods>('methods', {
  // 默认方法
  doSomething: () => console.warn('父组件未提供 methods'),
})
const handleClick = throttle((methodName: string = 'search') => {
  if (methods && methods[methodName])
    methods[methodName](props.remark)
  else ElMessage.error('按钮未启用！')
}, 1000)

const route = useRoute()
// 获取按钮并排序
const btnData = sortBy(route.meta.btns as IButtonMenuRoleMap[], 'ViewSort')
function isHasBtn(item: IButtonMenuRoleMap) {
  let signName = item.signName as string | number[] | null
  if (!signName) {
    return true
  }
  else if (typeof signName === 'string') {
    signName = signName
      .split(',')
      .filter(val => val)
      .map(val => Number(val))
  }
  if (signName.includes(Number(props.signName)))
    return true
  else return false
}
const isCollapse = ref<boolean>(false)
const isMoreThanMaxFormItemNum = ref<boolean>(false)
</script>

<template>
  <div class="search-bar">
    <div class="form-part">
      <div class="form-part-first">
        <template v-for="(item, index) in formItems" :key="index">
          <template v-if="index < maxFormItemNum">
            <search-input :item="item" :remark="remark" class="item-first" />
          </template>
        </template>
        <slot name="formFir" />
      </div>
      <div v-if="isMoreThanMaxFormItemNum && isCollapse" class="form-part-second">
        <template v-for="(item, index) in formItems" :key="index">
          <template v-if="index >= maxFormItemNum">
            <search-input :item="item" :remark="remark" />
          </template>
        </template>
        <slot name="formSec" />
      </div>
    </div>
    <div class="btn-part">
      <el-button type="primary" @click="handleClick('search')">
        查询
      </el-button>
      <el-button type="info" @click="handleClick('reset')">
        重置
      </el-button>
      <el-button type="warning" @click="handleClick('export')">
        导出
      </el-button>
      <template v-for="(item, index) in btnData">
        <el-button
          v-if="isHasBtn(item)" :key="index" :type=" item.ButtonType ? item.ButtonType : 'primary'"
          @click="handleClick(item.Methods)"
        >
          {{ item.BtnName }}
        </el-button>
      </template>
      <slot name="btn" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.search-bar {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;

  .form-part {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    .form-part-first {
      display: flex;
      width: 100%;
      // height: 40px;
      flex-wrap: wrap;
      justify-content: start;
      align-items: start;
    }

    .form-part-second {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
    }
  }

  .btn-part {
    // flex-grow: 1;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    max-width: 30%;
    min-width: 225px;

    .el-button {
      margin-left: 0;
      margin-right: 10px;
      margin-bottom: 8px;
    }
  }
}
</style>
